require('./PageHome.styl');
import { Control } from 'react-keeper';
const reactMixin = require('react-mixin');
const Actions = require('./actions');
const Store = require('./store');
import ui from 'clientConfig/util/jsapi/ui';
import { Boxs, NavBar, Group, PickerField, Context } from 'saltui';
const { HBox, Box, VBox } = Boxs;
import PlusThin from 'salt-icon/lib/PlusThin';
const Rollup = require('components/rollup');
const Listitem = require('components/listitem');
const Menu = require('components/menu');
const WithRefresh = require('components/withrefresh');
const Selectbar = require('components/selectbar');
const PendingList = require('components/pendinglist');
const ListWithClass = WithRefresh(
    PendingList,
    (pageNum, props, success, error) => {
        Actions.getMyclassLists(pageNum, props, success, error)
    }
);
class Home extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            show: false,//菜单显示
            classId: '',
            listdata: [],
            select_str: '',
            isBzr: null,
            classStr: ''
        };
        this.handleOnLeftClick = this.handleOnLeftClick.bind(this)
        this.handleOnRightClick = this.handleOnRightClick.bind(this);
        this.handleChange = this.handleChange.bind(this);
        this.refresh = this.refresh.bind(this);
        this.action = [
            {
                content: '允许出校',
                icon: "permission.svg",
                path: "/home/configpermission"
            }, {
                content: '禁止出校',
                icon: "forbid.svg",
                path: "/home/configpermission"
            }
        ];
    }
    handleOnLeftClick() {
        ui.close();
    }
    refresh(classId) {
        let t = this;
        this.setState({ classId }, () => {
            t.refs.ListWithClass.onRefresh();
            window.groupEl = {};
        })
    }
    //右侧导航按钮
    handleOnRightClick() {
        this.setState({
            show: !this.state.show,
        })
    }
    handleChange(value) {
        Control.go('/home/personalinfo')
    }
    getPhonetic(value) {
        return pinyin(value.text, { pinyinOnly: false });
    }
    selectGrouping(key) {
        const t = this;
        const element = window.groupEl[key];
        if (element) {
            element.scrollIntoView();
        }
    }
    render() {
        let t = this;
        return (
            <div className="home">
                <NavBar
                    className={this.state.className}
                    isShow={false}
                    title='我的班级'
                    onLeftClick={this.handleOnLeftClick.bind(this)}
                    onRightClick={Context.noop}
                    rightText=''
                />
                {this.state.isBzr == 1 && <PlusThin className="plus" fill="white" width="20" height="20" onClick={this.handleOnRightClick} />}
                {this.state.classId && <Menu
                    item={this.action}
                    show={this.state.show}
                    classId={this.state.classId}
                    listdata={this.state.listdata}
                />}
                {this.state.classId &&
                    <Rollup
                        type="class"
                        listdata={this.state.listdata}
                        refresh={this.refresh}
                        classId={this.state.classId}
                    />
                }
                {this.state.classId &&
                    <ListWithClass
                        className="msg"
                        ref="ListWithClass"
                        type="class"
                        leftSlip={false}
                        classId={this.state.classId}
                        isBzr={this.state.isBzr}
                    />
                }
                <Selectbar
                    selectStr={this.state.select_str}
                    onSelect={t.selectGrouping.bind(t)}
                />
            </div>
        );
    }

    componentWillMount() {
    }

    componentDidMount() {
        let cb = () => {

        }
        Actions.getClassList({}, cb)

    }

    componentWillReceiveProps(nextProps) {
    }

    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }

    componentWillUpdate(nextProps, nextState) {
    }

    componentDidUpdate(prevProps, prevState) {

    }

    componentWillUnmount() {
        window.groupEl = {};
    }
}
reactMixin.onClass(Home, Reflux.connect(Store));
module.exports = Home;
